@charset "UTF-8";

// 包含产品列表样式 文章列表样式

/* -------------------------------------------------
 * list css
 * ------------------------------------------------- */

.list-head{
	border-bottom: 2px solid $bodyBgColor;
	background-color: $white;
	.list-h-btn{
		float: right;
		margin-right: $defaultMargin;
		a{
			display: inline-block;
			padding: 10px;
		}
	}
}
.list{
	clear: both;
	ul{
		width: 105%;
	}
}
.list-item{
	display: block;
	float: left;
	.item-img{
		position: relative;
		background-color: $white;
		img{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			display: block;
			max-width: 100%;
			max-height: 100%;
		}
	}
	a{
		&:hover{
			text-decoration: none;
		}
	}
}


// product-pic list

.product-pic-list{
	ul{
		width: 1210px;
	}
	.list-item{
		float: left;
		width: 400px;
		.list-item-l,.list-item-r{
			width: 200px;
			// margin-right: 5px;
			float: left;
		}
	}
	.item-img{
		float: left;
		width: 200px;
		height: 185px;
		position: relative;
		overflow: hidden;
		&>a{
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
		}
		span.item-inner-img{
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
			background-color: $white;
		}
		div{
			cursor: pointer;
			position: absolute;
			width: 100%;
			text-align: center;
			color: $white;
			height: 100%;
			display: table;
			text-decoration: none;
			box-sizing: border-box;
			padding: 10%;
			background-color: $deepAlpha;
			span{
				font-size: 18px;
				color: $white;
				display: inline-block;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
		}
	}
	li{
		float: left;
		display: inline-block;
		width: 400px;
		&:last-child{
			margin-right: 0;
		}
		.item-placehold{
			float: right;
			width: 200px;
			height: 185px;
			background-color: #f3f4f8;
		}
	}
	ul{
		// margin-top: 5px;
		&:nth-child(odd){
			.list-item-l,.list-item-r{
				float: right;
			}
		}
	}
}